<template>
  <div class="hore-edit">
    <h3>编辑英雄</h3>
    <hr />
    <!-- <form class="form-horizontal"> -->
    <div class="form-group">
      <label class="col-sm-2 control-label">英雄名称</label>
      <div class="col-sm-10">
        <input type="text" v-model="formData.name" class="form-control" style="width:200px" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">英雄性别</label>
      <div class="col-sm-10">
        <!-- 双向绑定 -->
        <input v-model="formData.gender" type="radio" value="男" /> 男
        <input v-model="formData.gender" type="radio" value="女" /> 女
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-primary" @click="save">保存</button>
      </div>
    </div>
    <!-- </form> -->
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      formData: {
        name: "",
        gender: "男",
        time: ""
      }
    };
  },
  methods: {
    getDetail() {
      // 获取数据之后给formData赋值，formData有值之后给视图同步数据
      // id 需要从路由获取
      let id = this.$router.query.id;
      Axios.get(`http://localhost:6005/heroList/${id}`).then(res => {
        // console.log(res);
        let { name, gender, time } = res.data;
        this.formData.name = name;
        this.formData.gender = gender;
        this.formData.time = time;
      });
    },
    // 修改
    save() {
      let id = this.$router.query.id;
      let { name, gender } = this.formData;
      Axios.put(`http://localhost:6005/heroList/${id}`, {
        name,
        gender,
        time: new Date()
      }).then(res => {
        // 跳转到List
        this.$router.push({
          path: "/heroList"
        });
      });
    }
  },
  mounted() {
    this.getDetail();
  }
};
</script>